<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form_validation</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <style>
        input.error {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<section id="container">
    <#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading">
                            添加角色权限
                        </header>
                        <div class="panel-body">
                            <div class="form" >
                                <form class="cmxform form-horizontal" id="addRolePermission">
                                    <div class="form-group ">
                                        <label for="rname" class="control-label col-lg-3">角 色:</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="rname" name="rname" type="text" placeholder="请输入角色名称">
                                        </div>
                                    </div>
                                    <div style="height: 40px"></div>

                                    <div class="form-group" id="app">
                                        <label for="rname" class="control-label col-lg-3">权 限:</label>
                                        <div class="col-lg-7">
                                            <div  class="col-lg-2" v-for="(item,index) in result2">
                                                <input type="checkbox"  v-bind:value="item.pid" class="chk">{{item.pname}}
                                            </div>
                                        </div>

                                    </div>


                                    <div style="height: 40px"></div>

                                    <div class="form-group">
                                        <div class="col-lg-offset-5 col-lg-6">
                                            <button class="btn btn-primary" type="button" id="referBut">提交</button>
                                            &nbsp;&nbsp;&nbsp;<button class="btn btn-default" type="button" id="jectBut">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                    <div style="height: 200px"></div>
                </div>
            </div>
        </section>
         <#include "/foot.html">
    </section>
</section>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el: "#addRolePermission",
        data: {
            result2: []
        }
    });

    $.ajax({
        type: "POST",
        url: "/role/getPermission.do",
        dataType: "json",
        success: function (data) {
            app.result2 = data.permission;
        }
    });

    $("#referBut").click(function () {
        var x=[];
        $(".chk:checked").each(function () {
            x.push($(this).val());
        });

        $.ajax({
            type:"POST",
            url:"/role/add.do",
            data:{
                rname:$("#rname").val(),
                pid:JSON.stringify(x)
            },
            dataType:"json",
            success:function (data) {
                if (data.flag){
                    window.location.href="/role/getRole.do";
                }
            }
        });

    });


</script>

